<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的日程</title>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../layui_exts/laydateNote/laydateNote.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>

<div class="layui-container" style="padding: 15px;">
    <div class="layui-row">
        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote">
                我的日历
            </blockquote>
            <!--容器-->
            <div class="layui-inline laydateNote" id="test-n2"></div>
            <!--容器-->
            <!--详细记事本-->
            <div class="laydateNotebook">
                <div class="box"></div>
            </div>
            <!--容器-->
            <script type="text/html" id="fineTpl">
                <ul class="layui-timeline">
                    {{each lists v i }}
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">{{v.time}}</h3>
                            <p>
                                {{v.value}}
                                豆腐干豆腐干
                            </p>
                            <ul>
                                <li>《登高》</li>
                                <li>《茅屋为秋风所破歌》</li>
                            </ul>
                        </div>
                    </li>
                    {{/each}}
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title">...</div>
                        </div>
                    </li>
                </ul>
            </script>
            <!---->
        </div>
    </div>
</div>
</body>
<script>
    //调用
    layui
        .config({
            base: '/layui_exts' //假设这是你存放拓展模块的根目录
        })
        .extend({
            //设定模块别名
            laydateNote: '/laydateNote/laydateNote', //如果 mymod.js 是在根目录，也可以不用设定别名
            artTemplate: '/artTemplate/artTemplate'
        })

    layui.use(['laydateNote'], function () {
        //调用
        var laydateNote = layui.laydateNote
        laydateNote({
            elem: '#test-n2', //容器id,CLass
            url: '/page', //异步数据接口,本地浏览时可不设置
            sort: 'up', //日期排序，默认不设置不排序，up 日期升序，down 日期降序
            fine: '.laydateNotebook', //开启详细模式
            done: function (data, chooseData, type) {
                $.ajax({
                    url: "/page",
                    data: {title: chooseData.title, date: chooseData.time, value: chooseData.value},
                    type: type,
                    dataType: "json",
                    success: function (result) {

                    }
                })
                console.log(data, chooseData, type)
            }
        })
    })
</script>
</html>